<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    /*重新设置样式*/
    .form-control {
        width: 196px !important;
        height: 34px !important;
        padding: 10px !important;
    }
    #recommendtable {
        box-sizing: border-box !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
        color: #212529 !important;
        border-collapse: collapse !important;
        display: table !important;
        border-spacing: 2px !important;
        border-color: grey !important;
        text-align: left !important;
    }

    #recommendtable th {
        height: 50px;
    }

    #recommendtable tr {
        height: 35px;
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
        border-top-color: inherit;
        border-right-color: inherit;
        border-left-color: inherit;
        border-bottom: 2px #F3F1F1 solid;
    }

    #recommendtable td {
        font-size: 16px;
    }

    #recommendtable tr:nth-child(odd) {
        background: #FFFFFF !important;
    }

    #recommendtable tr:nth-child(even) {
        background: #FFFFFF !important;
    }

    .showinfo, .hideinfo {
        cursor: pointer;
        text-align: center;
    }
</style>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1 style="display: inline-block">
        台账信息编辑
    </h1>
    <button onclick="javascript:window.history.back();" type="button" class="btn btn-success"
            style="text-align:center;vertical-align:middle;font-size:30px;position:absolute;right:3%;display: inline-block;background-color: transparent;border: none;color: #5c5c5c;outline:none;">
        <i style="-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;"
           class="glyphicon glyphicon-share-alt"></i><span
            style="margin-left: 5px;font-size: 16px;position: absolute;top: 20%;">返回</span>
    </button>
</section>
<!--编辑模态框-->
<div class="modal fade" id="modal-addLedger">
    <div class="modal-dialog" style="width: 500px; height: 600px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">台账信息编辑</h4>
            </div>
            <form id="ledgerForm" class="form-horizontal" role="form" style="margin-right: 70px">
                <div class="modal-body">
                    <input type="hidden" id="imiItyId" name="imiItyId" th:value="${imiItyId}">
                    <input type="hidden" id="imiId" name="imiId">
                    <div class="form-group">
                        <label class="col-sm-4 control-label no-padding-right">字段名</label>
                        <div class="col-sm-8">
                            <input type="text" id="imiField" name="imiField"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label no-padding-right">值</label>
                        <div class="col-sm-8">
                            <input type="text" id="imiValue" name="imiValue"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label no-padding-right">台账单位</label>
                        <div class="col-sm-8">
                            <input type="text" id="imiUnit" name="imiUnit"
                                   class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" shiro:hasAnyPermissions="purinv:purledgeredit:edit" class="btn btn-info file-contract btn-file" id="btn-ledger-commit">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
<section class="content">
    <div class="box">
        <form id="fileForm">
            <div class="box-header">

                <div id="toolbar">
                    <button type="button" shiro:hasAnyPermissions="purinv:purledgeredit:edit"
                            class="btn btn-info pull-right" id="btn-addLedger">新增台账字段
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div class=" col-lg-12 col-md-12">
                    <table id="bootstrap-table"></table>
                </div>
                <div class="col-lg-12 col-md-12" style="padding-top: 30px">
                    <div style="float: left; display: block; margin-top: 5px;">
                        <form method="post" class="form-horizontal pull-left"
                              enctype="multipart/form-data"
                              style="display: inline-block">
                            <input id="anxItyId" type="hidden" th:value="${imiItyId}"/>
                            <input id="uploadFile" name="file" type="file"/>
                            <input id="anxUploadIp" name="anxUploadIp"
                                   th:value="${anxUploadIp}" type="hidden"/>
                        </form>

                    </div>
                    <button type="button" shiro:hasAnyPermissions="purinv:purledgeredit:upload" class="btn btn-success"
                            id="btn-upload" style="float: left;display: block;">上传
                    </button>
                </div>
                <div id="annex" class="col-lg-12 col-md-12">
                    <div class="col-lg-12"
                         style="
                                border-bottom: 1px solid #cdcdcd;
                                color: #444;
                                padding: 0px">
                             <span
                                     style="
                                        text-transform: uppercase;
                                        font-weight: 600;
                                        line-height: 50px;
                                        border-bottom: 4px solid #1e88e5;
                                        display: inline-block;
                                        margin: 0 0 -1px;
                                        font: 400 16px/36px 'Open Sans Condensed',sans-serif;
                                        padding: 0 5px 0 0;
                                        outline: none;">附件列表
                             </span></div>
                    <table id="recommendtable">
                        <thead>
                        <tr>
                            <th style="width: 60%">文件名</th>
                            <th style="width: 10%;text-align: center">上传时间</th>
                            <th style="width: 10%;text-align: center">文件大小</th>
                            <th style="width: 10%;text-align: center">下载次数</th>
                            <th style="width: 10%;text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <small><p style="word-wrap: break-word;width: 100%"></p></small>
                            </td>
                            <td>
                                <small>2019-11-04</small>
                            </td>
                            <td>
                                <small></small>
                            </td>
                            <td>
                                <small></small>
                            </td>
                            <td>
                                <small></small>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
</section>
<div th:include="include :: footer"></div>

<script th:inline="javascript">

    /**加载表格*/
    var table;

    /** 修改台账*/
    function updateLedger(id) {
        var rows = $('#bootstrap-table').bootstrapTable('getRowByUniqueId', id);//行的数据
        js.modal.open("modal-addLedger");
        $("#ledgerForm").fillData(rows);
    }

    /** 延迟加载文件列表*/
    function delayLoading(ityId) {
        setTimeout(function () {
            getAnnexList(ityId);
        }, 500);
    }

    /**
     *@FunctionName: getAnnexList
     *@Description: 加载文件列表
     *@DesignIdea: 根据外购件库存表主键加载文件列表
     *@Author: 徐一贺
     *@CreateDate: 2020/5/28 12:41
     *@Phone: 18241927380
     *@Param: [ity] 外购件主键
     *@Version: v1.0.0
     */
    function getAnnexList(ityId) {
        js.post({
            url: ctx + "pInventoryInfoEdit/getAnnexList",
            data: {
                anxItyId: ityId
            },
            success: function (result) {
                $("#recommendtable tbody").html('');
                var tbodyHtml = '';
                var tableData = result.data;
                if (tableData.length > 0) {
                    $("#annex").show();
                } else {
                    $("#annex").hide();
                }
                for (var i = 0; i < tableData.length; i++) {
                    var download = '';
                    var remove = '';
                    if (hasP('purinv:purledgeredit:download')) {
                        download = '<a onclick="delayLoading(' + tableData[i].anxItyId + ')" href="/pInventoryInfoEdit/download/' + tableData[i].anxId + '" class="btn btn-primary btn-xs"> 下载</a>';
                    }
                    if (hasP('purinv:purledgeredit:del')) {
                        remove = '<button type="button" style="margin-left: 25px" onclick="removeFile(' + tableData[i].anxId + ')" class="btn btn-danger btn-xs"> 删除</button>';
                    }
                    tbodyHtml += ' <tr><td style="vertical-align: middle"><small><p style="line-height: 35px;padding-top:8px;word-wrap: break-word;width: 100%;">' + tableData[i].anxFileName + '</p></small></td>' +
                        '<td style="text-align: center"><small>' + tableData[i].anxUploadDate + '</small></td>' +
                        '<td style="text-align: center"><small>' + tableData[i].anxFileSize + tableData[i].anxFileSizeUnit + '</small></td>' +
                        '<td style="text-align: center"><small>' + tableData[i].anxDownloadCount + '</small></td>' +
                        '<td style="text-align: center">' + download + remove +
                        '</td></tr>';
                }
                $("#recommendtable tbody").html(tbodyHtml);
            }
        })
    }

    /**
     *@FunctionName: removeLedger
     *@Description: 删除台账信息
     *@Author: 徐一贺
     *@CreateDate: 2020/5/28 8:21
     *@Phone: 18241927380
     *@Param:
     *@Version: v 1.0.0
     */
    function removeLedger(imiId) {
        js.modal.confirm("尊敬的用户，您确认要删除此台账信息吗？", function () {
            js.ajax({
                url: ctx + 'pInventoryInfoEdit/removeLedger',
                type: 'post',
                traditional: true,            // 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: {
                    imiId: imiId
                },
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.search(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                },
                error: function () {
                    js.modal.fail();
                }
            })
        });
    }

    /**
     *@FunctionName:  $("#btn-upload").on('click', function () { });
     *@Description: 文件上传功能。
     *@DesignIdea: 上传并验证.exe文件.bat文件.vbs文件不能上传
     *@Author: 徐一贺
     *@CreateDate: 2020/5/9 16:10
     *@Phone: 18241927380
     *@Param: [click] 按钮单击事件，[function（）{}] 执行的函数
     *@Version: v 1.0.0
     */
    $("#btn-upload").on('click', function () {
        var files = $('#uploadFile').prop('files');
        var data = new FormData();
        if (files.length == 0) {
            js.modal.warning("请选择上传文件。");
            return;
        }
        var fileName = files[0].name;
        var fileType = fileName.substr(fileName.lastIndexOf(".")).toUpperCase();
        if (fileType == 'EXE') {
            js.modal.warning("不支持上传.exe文件。");
            return;
        }
        if (fileType == 'BAT') {
            js.modal.warning("不支持上传.bat文件。");
            return;
        }
        if (fileType == 'VBS') {
            js.modal.warning("不支持上传.vbs文件。");
            return;
        }
        data.append('file', files[0]);
        data.append('anxItyId', $('#anxItyId').val());
        data.append("anxUploadIp", $('#anxUploadIp').val());
        $.ajax({
            type: 'POST',
            url: ctx + "pInventoryInfoEdit/upload",
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.type == 'SUCCESS') {
                    js.modal.success(result.msg);
                    getAnnexList($("#anxItyId").val());
                } else if (result.type == 'ERROR') {
                    if (result.msg == '请选择文件!') {
                        js.modal.warning(result.msg);
                    } else if (result.msg == '文件过大超过10MB，请选择处理文件后上传！') {
                        js.modal.warning(result.msg);
                    } else if (result.msg == '不支持上传exe格式文件！') {
                        js.modal.warning(result.msg);
                    } else {
                        js.modal.fail(result.msg);
                    }
                }

            }
        });
    });

    /**
     *@FunctionName: removeFile
     *@Description: 删除上传面板上的文件
     *@DesignIdea: 根据外购件附件表主键删除文件。
     *@Author: 徐一贺
     *@CreateDate: 2020/5/9 16:10
     *@Phone: 18241927380
     *@Param: [anxId] 外购件附件表主键
     *@Version: v 1.0.0
     */
    function removeFile(anxId) {
        js.modal.confirm("尊敬的用户，您确认要删除此文件吗？", function () {
            $.post(
                ctx + 'pInventoryInfoEdit/removeFile',
                {anxId: anxId},
                function (result) {
                    if (result.type == web_status.SUCCESS) {
                        getAnnexList($("#anxItyId").val());
                        js.modal.success(result.msg);
                    } else {
                        js.modal.fail(result.msg);
                    }
                },
                'json');
        });
    }


    $(function () {
        $("title").html($("title").html()+" —— 台账信息编辑");
        /** 加载附件列表 */
        getAnnexList($("#anxItyId").val());
        /** 加载列表 */
        table = js.table.init({
            url: ctx + 'pInventoryInfoEdit/findPInventoryMaterielInfoList/' + $("#anxItyId").val(),
            pageSize: 300,
            uniqueId: 'imiId',
            columns: [
                {
                    title: '序号', field: 'imiId', width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料描述', field: 'ityMatDesc'},
                {title: '字段名', field: 'imiField'},
                {title: '值', field: 'imiValue'},
                {title: '台账单位', field: 'imiUnit'},
                {
                    title: '操作',
                    formatter: function (value, row, index) {
                        var actions = [];
                            if (hasP('purinv:purledgeredit:edit')) {
                                actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="updateLedger(' + row.imiId + ')"> 修改</a>');
                            }
                            if (hasP('purinv:purledgeredit:del')) {
                                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="removeLedger(' + row.imiId + ')"> 删除</a>');
                            }
                        return actions.join('');
                    }
                }
            ]
        });

        /** 表格搜索 */
        $("#btn-search").click(function () {
            js.table.search(table);
        });

        /** 新建台账字段*/
        $("#btn-addLedger").click(function () {
            document.getElementById("ledgerForm").reset();
            js.modal.open("modal-addLedger");
        });


        /**
         *@Description: 保存台账
         */
        $("#btn-ledger-commit").on('click', function () {
            if ($("#ledgerForm [name='imiField']").val() == undefined ||
                $("#ledgerForm [name='imiField']").val() == null ||
                $("#ledgerForm [name='imiField']").val() == '') {
                js.modal.warning("请输入字段名！");
                return;
            }
            if ($("#ledgerForm [name='imiValue']").val() == undefined ||
                $("#ledgerForm [name='imiValue']").val() == null ||
                $("#ledgerForm [name='imiValue']").val() == '') {
                js.modal.warning("请输入值！");
                return;
            }
            if ($("#ledgerForm [name='imiUnit']").val() == undefined ||
                $("#ledgerForm [name='imiUnit']").val() == null ||
                $("#ledgerForm [name='imiUnit']").val() == '') {
                js.modal.warning("请输入台账单位！");
                return;
            }

            js.post({
                url: ctx + 'pInventoryInfoEdit/saveLedger',
                type: 'post',
                traditional: true,            // 阻止深度序列化， 使参数可以使用数组
                dataType: 'json',
                contentType: "application/x-www-form-urlencoded",
                data: $("#ledgerForm").serialize(),
                async: true,                // 异步执行
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.search(table);
                        js.modal.hide("modal-addLedger");
                    } else {
                        js.modal.warning(result.msg);
                    }
                },
                error: function () {
                    js.modal.fail();
                }
            });
        });

    })

</script>

</body>
</html>